<template>
	<div class="login">
		<div class="by">
			<div class="meteor" :style="`transform:rotate(${40}deg)`">
				<div class="line" :style="`animationDelay:${1.5}s;width:${2}px;height:${100}px;`"></div>
				<div class="line" :style="`animationDelay:${5}s;width:${1}px;height:${100}px;`"></div>
			</div>
			<div class="meteors" :style="`transform:rotate(${45}deg)`">
				<div class="lines" :style="`animationDelay:${3.5}s;width:${2}px;height:${100}px;`"></div>
			</div>
			<div class="meteort" :style="`transform:rotate(${50}deg)`">
				<div class="linet" :style="`animationDelay:${2.5}s;width:${2}px;height:${100}px;`"></div>
				<div class="linet" :style="`animationDelay:${5}s;width:${1}px;height:${100}px;`"></div>
			</div>

			<div class="login-conter">
				<div class="form">
					<h3>CS博客</h3>
					<label for="username">用户名</label>
					<input type="text" placeholder="UserName or Phone" id="username" v-model="loginParams.account">

					<label for="password">密码</label>
					<input type="password" placeholder="Password" id="password" @keydown.enter="firmLogin"
						v-model="loginParams.pwd">

					<button @click="firmLogin">登录</button>

					<div class="social">
						<div class="go" @click="$router.go(-1)"><i class="fas fa-gamepad"></i>返回</div>
						<div class="fb" @click="$router.push('/Register')"><i class="far fa-comments"></i>注册</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginParams: {
					account: "",
					pwd: ""
				}
			};
		},
		mounted() {
			debugger
		},

		methods: {
			firmLogin() {
				debugger
				if (this.loginParams.account.trim() == null || this.loginParams.account.trim() == "") {
					this.$message.warning("用户名不能为空!")
				} else if (this.loginParams.pwd.trim() == null || this.loginParams.pwd.trim() == "") {
					this.$message.warning("密码不能为空!")
				} else {
					this.$api.user.Login(this.loginParams).then(res => {
						if (res.code == 200) {
							// 使用vuex存token
							this.$store.commit('GETTOKENDATE', res.data)
							// 发送用户请求
							this.$store.dispatch("getUserInfo")
							// this.$router.go(-1)
							this.$router.push({ path: "/" })
						}
					})

				}
			}
		},

	};
</script>

<style lang="less" scoped>
	.by {
		background: url("https://blog-chen.oss-cn-shanghai.aliyuncs.com/1a55c797db8d42548da8308b74c67aab.png") no-repeat;
		width: 100%;
		min-height: 100vh;
		background-size: 100% 100%;
		background-attachment: fixed;
		position: relative;
		z-index: 10;

	}

	.login-conter {
		width: 1250px;
		margin: 0 auto;
		height: 100vh;
		// border: 1px solid red;
	}

	.form {
		height: 480px;
		width: 400px;
		background-color: rgba(0, 0, 0, 0.13);
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		border-radius: 10px;
		backdrop-filter: blur(10px);
		border: 2px solid rgba(255, 255, 255, 0.09);
		box-shadow: 0 0 40px rgba(20, 18, 42, 0.6);
		padding: 50px 35px;
	}

	.form * {
		font-family: 'Poppins', sans-serif;
		color: #ffffff;
		letter-spacing: 0.5px;
		outline: none;
		border: none;
	}

	.form h3 {
		font-size: 32px;
		font-weight: 500;
		line-height: 42px;
		text-align: center;
	}

	label {
		display: block;
		margin-top: 30px;
		font-size: 16px;
		font-weight: 500;
	}

	input {
		display: block;
		height: 50px;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.07);
		border-radius: 3px;
		padding: 0 10px;
		margin-top: 8px;
		font-size: 14px;
		font-weight: 300;
	}

	button {
		margin-top: 50px;
		width: 100%;
		background-color: #ffffff;
		color: #080710 !important;
		padding: 15px 0;
		font-size: 18px;
		font-weight: 600;
		border-radius: 5px;
		cursor: pointer;
	}

	.social {
		margin-top: 30px;
		display: flex;
	}

	.social div {
		background: red;
		width: 150px;
		line-height: 15px;
		border-radius: 3px;
		padding: 5px 10px 10px 5px;
		background-color: rgba(255, 255, 255, 0.27);
		color: #eaf0fb;
		text-align: center;
	}

	.social div:hover {
		background-color: rgba(255, 255, 255, 0.47);
	}

	.social .co {
		margin-left: 25px;
	}

	.social i {
		margin-right: 4px;
	}

	::placeholder {
		color: #e5e5e5;
	}

	.fb {
		margin-left: 71px;
	}



	.meteor {
		width: 2px;
		height: 200px;
		position: relative;
		margin: 0 auto;
		float: left;
		margin-left: 300px;

		// overflow: hidden;
		.line {
			animation: meteoring 6s infinite linear;
			position: absolute;
			width: 2px;
			height: 200px;
			background: linear-gradient(to top,
					rgb(2, 161, 195, 1),
					rgba(11, 36, 66, 0.1));
			border-radius: 2px;
			box-shadow: 0px 10px 20px 0px #02a1c3;
			opacity: 0;

			&::before {
				width: 2px;
				height: 2px;
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0px;
				border-radius: 50%;
				background: #00d0ff;
				box-shadow: 0px 0px 12px 5px #00d0ff;
			}
		}
	}


	.meteors {
		width: 2px;
		height: 200px;
		position: relative;
		margin: 0 auto;
		float: left;
		margin-left: 500px;


		// overflow: hidden;
		.lines {
			animation: meteoring 6s infinite linear;
			position: absolute;
			width: 2px;
			height: 200px;
			background: linear-gradient(to top,
					rgb(2, 161, 195, 1),
					rgba(11, 36, 66, 0.1));
			border-radius: 2px;
			box-shadow: 0px 10px 20px 0px #02a1c3;
			opacity: 0;

			&::before {
				width: 2px;
				height: 2px;
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0px;
				border-radius: 50%;
				background: #00d0ff;
				box-shadow: 0px 0px 12px 5px #00d0ff;
			}
		}
	}


	.meteort {
		width: 2px;
		height: 200px;
		position: relative;
		float: right;
		margin-right: 300px;

		// overflow: hidden;
		.linet {
			animation: meteoring 6s infinite linear;
			position: absolute;
			width: 2px;
			height: 200px;
			background: linear-gradient(to top,
					rgb(2, 161, 195, 1),
					rgba(11, 36, 66, 0.1));
			border-radius: 2px;
			box-shadow: 0px 10px 20px 0px #02a1c3;
			opacity: 0;

			&::before {
				width: 2px;
				height: 2px;
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0px;
				border-radius: 50%;
				background: #00d0ff;
				box-shadow: 0px 0px 12px 5px #00d0ff;
			}
		}
	}

	@keyframes meteoring {
		0% {
			opacity: 0;
			top: -250px;
		}

		25% {
			opacity: 0.5;
			top: 0px;
		}

		50% {
			opacity: 0.8;
			top: 250px;
		}

		75% {
			opacity: 1;
			top: 500px;
		}

		100% {
			opacity: 0;
			top: 750px;
		}
	}
</style>